<template>
  <div class="bottom-bar">
    <div class="check-content">
      <check-button
          :is-checked="isSelectAll"
          @click.native="checkClick"
          class="check-button" />
      <span>全选</span>
    </div>

    <div class="price">
      合计：{{totalPrice}}
    </div>

    <div class="calculate" @click="calcClick">
      去结算: ({{checkLength}})
    </div>

  </div>
</template>

<script>
import CheckButton from 'components/content/checkButton/CheckButton'
import { mapGetters } from 'vuex'

export default {
  name:"CartBottomBar",
  components:{
    CheckButton,
  },
  computed:{
    ...mapGetters(['cartList']),

    totalPrice(){
      return '￥' + this.cartList.filter(item=>{
        return item.checked
      }).reduce((preValue,item)=>{
        return preValue + item.price * item.count
      },0).toFixed(2)
    },

    checkLength(){
      return this.cartList.filter(item => item.checked).length
    },

    isSelectAll(){
      // find方法是遍历到一个未被选中就可以了
      if(this.cartList.length === 0){
        return false
      }else{
      return !this.cartList.find(item => !item.checked)
      }


      // 不取这个方法的原因：filter会遍历所有，性能不好，只要有一个未被选中就可以了
      // 过滤到cartList里面有checked属性为false，就是有一个没有被选中的，那么length值为ture，所以取反那么这个值就为false
      // return !(this.cartList.filter(item => !item.checked).length)
    }
  },
  methods:{
    checkClick(){
      if(this.isSelectAll){//全部选中
        this.cartList.forEach(item => item.checked = false);
      }else{//有一个不选中
        this.cartList.forEach(item => item.checked = true)
      }
    },
    calcClick(){
      if(!this.isSelectAll){
        this.$toast.show('请选择需要购买的商品',2000)
      }
    }
  }
}
</script>

<style scoped>
  .bottom-bar{
    position: relative;
    display:flex;

    height: 40px;
    line-height: 40px;
    font-size: 14px;

    background-color: #eee;
  }

  .check-content{
    display: flex;
    align-items:center;
    margin-left:10px;
    width: 60px;
  }

  .check-button{
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin-right:5px;
  }

  .price{
    margin-left:30px;
    flex: 1;
  }

  .calculate{
    width: 90px;
    color:#fff;
    text-align: center;
    background-color:  var(--color-tint);
  }
</style>
